<!--公用组件：主页表格
      /**
      * index-table
      * @desc 按钮部分,搜索部分,表格,分页
      * @author yukaihua
      * @date 2020年06月03日
      * @param {Object} [config]    - 配置参数
            * @param {String} [header]    - 头部部分
                  * @param {String} [placeHolder]    - 搜索栏placeholder
                  * @param {Array} [btnList]    - 头部按钮组
                  * @param {Boolean} [inputNotDisplay]	-搜索栏是否不显示（不传默认显示）
                  * @param {Object} [selectInput]	- 选择下拉框
                  		* @param {String} [placeHolder]		-下拉框placeHolder
                  		* @param {Array} [options]		-下拉框选项
            * @param {Array} [tableBtn]    - 表格操作栏中的按钮组
            * @param {Array} [column]    - 表格列对应label
      * @param {Array} [table]    - 表格数据
      * @param {Boolean} [loading]    - 表格loading状态(false)
      * @param {Number} [totalPage]    - 表格总页数
      * @param {Boolean} [hasPagination]    - 表格是否有分页(true)
      * @functions [getAllData] - 获取数据
      * @functions [clickBtn] - 点击头部按钮事件
      * @functions [clickTableBtn] - 点击表格操作栏按钮事件
      * @example 调用示例
      * <index-table
                        ref="table"
                        @getAllData="getDataList"
                        @clickBtn="clickBtn"
                        @clickTableBtn="clickTableBtn"
                        :loading="loading"
                        :totalPage="totalPage"
                        :table="table"
                        :config="config"></index-table>
      */
-->
<template>
	<div class="kdbd-index-table" :class="[autoHeight ? 'kdbd-details-table-auto-height' : '']">
		<div class="kdbd-header" v-if="JSON.stringify(config.header) !== '{}'">
			<div class="kdbd-searchBar">
				<!-- 第一种搜索框，内含搜索按钮 -->
				<div class="kdbd-searchInput" v-if="config.header && !config.header.inputNotDisplay">
					<el-input
						:placeHolder="config.header && config.header.placeHolder"
						clearable
						@clear="reset()"
						@focus="focusInput"
						maxlength="255"
						@keyup.native.enter="searchData"
						v-model="search.role">
					</el-input>
					<i class="el-icon-search searchButton" @click="searchData"></i>
				</div>
				<!--两个输入框-->
				<div class="kdbd-searchInput" v-if="config.header && config.header.inputDisplay2">
					<el-input
						:placeHolder="config.header && config.header.placeHolder2"
						clearable
						@clear="reset()"
						@focus="focusInput"
						maxlength="255"
						@keyup.native.enter="searchData"
						v-model="search.role2">
					</el-input>
					<i class="el-icon-search searchButton" @click="searchData"></i>
				</div>

				<el-radio-group v-model="radioValue" @change="searchData"
								v-if="config.header && config.header.radioList && config.header.radioList.length">
					<el-radio v-for="(item, index) in config.header && config.header.radioList" :key="index"
							  :label="item.value">{{item.name}}
					</el-radio>
				</el-radio-group>
				<!-- 第二种搜索框，后面是下拉框组，单独搜索重置按钮 -->
				<div class="kdbd-searchInput noInset" v-if="config.header && config.header.inputNoInset">
					<el-input :placeHolder="config.header && config.header.placeHolder2"
							  clearable
							  @clear="reset()"
							  @focus="focusInput"
							  maxlength="255"
							  @keyup.native.enter="searchData"
							  v-model="search.role"></el-input>
				</div>
				<slot name="prevBtn"></slot>
				<el-button type="primary" :plain="true" @click="searchData"
						   v-if="config.header && config.header.searchBtn">搜索
				</el-button>
				<el-button type="primary" :plain="true" @click="reset" v-if="config.header && config.header.resetBtn">
					重置
				</el-button>
				<el-select v-if="config.header && config.header.selectInput" v-model="selectValue" @change="searchData"
						   :placeholder="config.header.selectInput.placeHolder" clearable>
					<el-option
						v-for="item in config.header.selectInput.options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
				<!--第二个下拉框-->
				<el-select v-if="config.header && config.header.selectInput2" v-model="selectValue2"
						   @change="searchData" :placeholder="config.header.selectInput2.placeHolder" clearable>
					<el-option
						v-for="item in config.header.selectInput2.options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
				<el-button v-for="(item, index) in config.header && config.header.btnList" :key="index" type="primary"
						   :plain="item.plain" @click="clickBtn(index)">
					{{item.name}}
				</el-button>
			</div>
		</div>
		<div class="kdbd-info" v-if="config.info">
			<slot name="info"></slot>
		</div>
		<div class="kdbd-table">
			<el-table
				@row-click="rowClick"
				@row-dblclick="rowDblclick"
				v-loading="loading"
				highlight-current-row
				ref="multipleTable"
				:data="spliceData ? spliceTable : table"
				:border="hasBorder"
				height="100%"
				:row-class-name="rowClassName"
				tooltip-effect="dark"
				@selection-change="handleSelectionChange"
				@sort-change="sortTable"
				v-bind="$attrs">
				<el-table-column
					type="selection"
					:align="config.align"
					v-if="!config.noSelection && config.column && config.column.length > 0"
				>
				</el-table-column>
				<el-table-column
					label
					width="60"
					v-if="hasRadio"
				>
					<template slot-scope="scope">
						<el-radio :label="scope.row.id" v-model="radioId">&nbsp;</el-radio>
					</template>
				</el-table-column>
				<el-table-column
					type="index"
					:align="config.align"
					width="60"
					label="序号"
					v-if="!config.noIndex && config.column && config.column.length > 0">
				</el-table-column>
				<!-- :render-header="renderHeader" tooltip-->
				<el-table-column
					:align="config.align ? config.align : item.align ? item.align : 'left'"
					:header-align="config.align ? config.align : item.align ? item.align : 'left'"
					v-for="(item,index) in config.column"
					v-if="!item.isClose"
					:render-header="renderHeader"
					:key="index"
					:label="item.label"
					:prop="item.key"
					:min-width="item.width"
					:sortable="item.sort"
					:show-overflow-tooltip="true">
					<template slot-scope="scope">
                        <span v-if="config.editable || item.editable">
                            <el-tooltip v-if="!item.role" :disabled="!getTooltipContent(scope.row, item.key, scope)"
										:content="getTooltipContent(scope.row, item.key)" placement="bottom">
                                <el-input :readonly="isReadOnly" type="text" maxlength="255"
										  v-model="scope.row[item.key]"
										  :class="getTooltipContent(scope.row, item.key) ? 'warningBackground' : ''"
										  @change="removeRole(scope.row, item.key)"></el-input>
                            </el-tooltip>
							<el-input type="text" v-if="item.role" maxlength="255" v-model="scope.row[item.key]"
									  @input="changeStatusByRole(scope, item)" readonly :readonly="isReadOnly">
								<i :class="(scope.row.iconStyle || 'el-icon-edit')"
								   :style="{ color: scope.row.iconStyle === 'el-icon-circle-check' ? 'green' : scope.row.iconStyle === 'el-icon-circle-close' ? 'red' : '' }"
								   slot="append"></i>
							</el-input>
                        </span>
						<span v-else>
                            <span v-if="item.custom">
                                <slot :name="item.custom" :value="scope.row[item.key]" :index="scope.$index"
									  :rowData="scope"></slot>
                            </span>
							<span v-else-if="item.isSelection">
								<el-checkbox v-model="scope.row[item.key]"></el-checkbox>
							</span>
                            <span v-else-if="item.styleShow == 'number'"
								  v-html="showData(scope.row[item.key], false)"></span>
							<span v-else v-html="showData(scope.row[item.key], true)"></span>
                        </span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="config.tableBtn && showOnUp"
					:align="config.align"
					class="setting_button"
					:min-width="config.tableBtnWidth"
					:label="config.tableBtnName ? config.tableBtnName : '操作'">
					<template slot-scope="scope">
						<!-- 不是白肤显示文字 -->
						<div style="display: contents;" v-if="theme !== 'light'">
							<span :class="'operation-btn ' + (item.className || '')"
								  v-for="(item, index) in config.tableBtn"
								  v-if="judgeShow(item, scope)"
								  @click.stop="clickTableBtn(index, scope.$index, scope.row)"
								  :key="index">{{item.name}}</span>
						</div>
						<!-- 白肤显示图标 -->
						<div style="display: contents;" v-if="theme === 'light'">
							<!--                            特殊优化，为满足特定需求增加的内容-特殊处理-->
							<div v-if="computedOperationTeshu(config.tableBtn, scope).length <= 3 && config.teShuButton"
								 style="display: contents;">
								<span v-for="(item, index) in computedOperationTeshu(config.tableBtn, scope)"
									  :key="index">
<!--									<span :title="item.name" :class="'operation-btn ' + (item.className || '')"-->
									<span :class="'operation-btn ' + (item.className || '')"
										  @click.stop="clickTableBtn(item.index, scope.$index, scope.row)"
										  v-html="item.icon"></span>
                                    <span class="dividingTeShu" v-if="item == 'teshu' && index == 0">直接申请</span>
                                    <span class="dividingTeShu" v-if="item == 'teshu' && index == 1">加入购物车</span>
									<span class="dividingLine"
										  v-if="computedOperationTeshu(config.tableBtn, scope).length - 1 > index">{{ ' | ' }}</span>
								</span>
							</div>
							<div v-if="computedOperation(config.tableBtn, scope).length <= 3 && !config.teShuButton"
								 style="display: contents;">
								<span v-for="(item, index) in computedOperation(config.tableBtn, scope)" :key="index">
<!--									<span :title="item.name" :class="'operation-btn ' + (item.className || '')"-->
									<span :class="'operation-btn ' + (item.className || '')"
										  @click.stop="clickTableBtn(item.index, scope.$index, scope.row)"
										  v-html="item.icon"></span>
									<span class="dividingLine"
										  v-if="computedOperation(config.tableBtn, scope).length - 1 > index">{{ ' | ' }}</span>
								</span>
							</div>
							<div style="display: contents;" v-if="computedOperation(config.tableBtn, scope).length > 3">
								<span v-for="(item, index) in computedOperation(config.tableBtn, scope).slice(0,2)"
									  :key="index">
<!--									<span :title="item.name" :class="'operation-btn ' + (item.className || '')"-->
									<span :class="'operation-btn ' + (item.className || '')"
										  @click.stop="clickTableBtn(item.index, scope.$index, scope.row)"
										  v-html="item.icon"></span>
									<span class="dividingLine">{{ ' | ' }}</span>
								</span>
								<el-dropdown trigger="hover" placement="bottom">
									<span class="operation-btn">
										<i class="el-icon-more" title="更多"></i>
									</span>
									<el-dropdown-menu class="index-table-dropdown" slot="dropdown">
										<el-dropdown-item
											v-for="(item, index) in computedOperation(config.tableBtn, scope).slice(2)"
											:key="item.index">
											<div class="el-dropdown-menu-item"
												 @click="clickTableBtn(item.index, scope.$index, scope.row)">
												<!--                                                <span :title="item.name" v-html="item.icon"></span>-->
												<span v-html="item.icon"></span>
											</div>
										</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</div>
						</div>
					</template>
				</el-table-column>
				<!--根据列表内容动态变换操作内容-->
				<el-table-column
					v-if="config.tableBtn && !showOnUp"
					:align="config.align"
					class="setting_button"
					:min-width="config.tableBtnWidth"
					:label="config.tableBtnName ? config.tableBtnName : '操作'">
					<template slot-scope="scope" style="display: flex">
						<!--						<p>{{scope.row.ruleAttr}}</p>-->
						<div style="display: flex">
							<!--							<span :class="!(scope.row.ruleAttr === 'S' && item.name === '编辑')? ('operation-btn ' + (item.className || '')) : ('operation-bt ' + (item.className || ''))" v-for="(item, index) in config.tableBtn"-->
							<!--								  v-if="judgeShow(item, scope)" style="display: flex"-->
							<!--								  @click.stop="clickTableBtn(index, scope.$index, scope.row)" :key="index">-->
							<!--								<p v-if="(scope.row.ruleAttr === 'P' && item.name === '编辑')">{{item.name}}</p>-->
							<!--								<p v-if="(scope.row.ruleAttr === 'S' && item.name === '查看')">{{item.name}}</p>-->
							<!--							</span>-->
							<span v-for="(item, index) in config.tableBtn"
								  v-if="judgeShow(item, scope)" style="display: flex; align-items: center"
								  @click.stop="clickTableBtn(index, scope.$index, scope.row)" :key="index">
								<p v-if="(scope.row.ruleAttr === 'P' && item.name === '详情')" :class="'operation-btn'">{{item.name}}</p>
								<p v-if="(scope.row.ruleAttr === 'P' && item.name === '详情')"
								   :class="'operation-btn' + item.className">&ensp;|&ensp;</p>
								<p v-if="(scope.row.ruleAttr === 'P' && item.name === '编辑')" :class="'operation-btn'">{{item.name}}</p>
								<p v-if="(scope.row.ruleAttr === 'P' && item.name === '编辑')"
								   :class="'operation-btn' + item.className">&ensp;|</p>
								<p v-if="(scope.row.ruleAttr === 'S' && item.name === '详情')" :class="'operation-btn'">{{item.name}}</p>
								<p v-if="(scope.row.ruleAttr === 'P' && item.name === '删除')" :class="'operation-btn'">&ensp;{{item.name}}</p>
							</span>
						</div>
					</template>
				</el-table-column>
				<!--展开行-->
				<el-table-column v-if="isExpand" label="异常描述" width="420">
					<template slot-scope="scope">
						<el-popover trigger="hover" :ref="`popover-${scope.$index}`" placement="bottom-start"
									width="290">
							<p style="word-break:break-all;">{{ scope.row.errorDesc|errorText }}</p>
							<el-button type="primary" size="mini" @click="viewError(scope)" style="float: right">详情
							</el-button>
							<span slot="reference">{{scope.row.errorDesc|ellipsisText}}</span>
						</el-popover>
					</template>
				</el-table-column>
				<!--展开行-->
				<el-table-column v-if="isExpandT" label="异常信息" width="420">
					<template slot-scope="scope">
						<el-popover trigger="hover" :ref="`popover-${scope.$index}`" placement="bottom-start"
									width="290">
							<p style="word-break:break-all;">{{ scope.row.errorMsg }}</p>
							<el-button type="primary" size="mini" @click="viewError(scope)" style="float: right">详情
							</el-button>
							<span slot="reference">{{scope.row.errorMsg|ellipsisText}}</span>
						</el-popover>
					</template>
				</el-table-column>
				<!--插入操作栏等自定义列-->
				<slot></slot>
				<!--暂无数据样式-->
				<template slot="empty">
					<div class="noData" style="display: block;">
						<!-- <img v-if="theme !== 'light' && theme != null " class="no-data-img" src="../../assets/images/no-data.png"/>
						<img v-if="theme === 'light' || theme == null" class="no-data-img" src="../../assets/images/no-data-light.png"/> -->
						<p class="no-data-text">暂无数据</p>
					</div>
				</template>
			</el-table>
		</div>
		<div class="kdbd-pagination" v-if="hasPagination">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="(currentPage + 1)"
				:page-sizes="pageSizes"
				:page-size="pageSize"
				:layout="'total, sizes, prev, pager, next, jumper'"
				:total="totalPage">
			</el-pagination>
		</div>
		<el-Modal title="异常详情" :visible.sync="isShowModal" class="error-detail">
			<el-input
				type="textarea"
				:autosize="{ minRows: 5, maxRows: 14}"
				v-model="errorDetail"
				style="margin-bottom: 20px;">
			</el-input>
		</el-Modal>
	</div>
</template>

<script>

	export default {
		name: 'IndexTable',
		props: {
			config: {
				type: Object,
				default: () => {
				}
			},
			hasRadio: {
				type: Boolean,
				default: false
			},
			rowRadioId: {
				type: String | Number,
				default: ''
			},
			hasSelection: {
				type: Boolean,
				default: false
			},
			isFrontendPagination: {
				type: Boolean,
				default: false
			},
			hasPagination: {
				type: Boolean,
				default: true
			},
			tableBtn: {
				type: Array,
				default: () => []
			},
			//数据接入的btn
			tableBtn2: {
				type: Array,
				default: () => []
			},
			tableBtn3: {
				type: Array,
				default: () => []
			},
			isSmallPagination: {
				type: Boolean,
				default: false
			},
			hasBorder: {
				type: Boolean,
				default: false
			},
			hasPadding: {
				type: Boolean,
				default: false
			},
			autoHeight: {
				type: Boolean,
				default: false
			},
			noComponentCreated: {
				type: Boolean,
				default: false
			},
			isTrend: {
				type: Boolean,
				default: false
			},
			header: {
				type: Object,
				default: function () {
					return {};
				}
			},
			isReadOnly: {
				type: Boolean,
				default: false
			},
			isOneInput: {
				type: Boolean,
				default: false
			},
			column: {
				type: Array,
				default: function () {
					return [];
				}
			},
			table: {
				type: Array,
				default: function () {
					return [];
				}
			},
			loading: {
				type: Boolean,
				default: false
			},
			exportLoading: {
				type: Boolean,
				default: false
			},
			totalPage: {
				type: Number
			},
			isShowSummary: {
				type: Boolean,
				default: false
			},
			summaryText: {
				type: String,
				default: '合计'
			},
			isExpand: {
				type: Boolean,
				default: false
			},
			isExpandT: {
				type: Boolean,
				default: false
			},
			hasIndex: {
				type: Boolean,
				default: true
			},
			permission: {
				type: String,
				default: ''
			},
			haveSmallTable: {
				type: Boolean,
				default: false
			},
			smallTableData: {
				type: Array,
				default: function () {
					return [];
				}
			},
			smallTableIsLoading: {
				type: Boolean,
				default: false
			},
			spliceData: {
				type: Boolean,
				default: false
			},
			currentKey: {
				type: String,
				default: ''
			},
			//根据内容动态选择展示操作
			showOnUp: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			table() {
				// 对 Table 进行重新布局
				this.$refs.multipleTable.doLayout();
			}
		},
		created() {
			console.log('this is console test111asa: ', this.config, this.config.header);
		},
		mounted() {
			if (this.hasRadio) {
				this.radioId = JSON.parse(JSON.stringify(this.rowRadioId));
			}
		},
		data() {
			return {
				isShowModal: false,
				errorDetail: '',
				//  输入框搜索的值
				search: {
					role: '',
					role2: ''
				},
				radioValue: '',
				selectValue: '',
				selectValue2: '',
				spliceTable: [],
				defaultSelectValue: '',
				theme: 'light',
				pageSizes: [15, 30, 45],
				//表格多选数据
				multipleSelection: [],
				radioId: '',
				currentPage: 0,
				pageSize: 15,
				spliceTotalPage: 0,
				rules: {
					role: [
						{min: 0, max: 255, message: '长度在 0 到 255 个字符', trigger: 'blur'}
						// {validator: validateLegal, trigger: 'blur'}
					],
					role2: [
						{min: 0, max: 255, message: '长度在 0 到 255 个字符', trigger: 'blur'}
					]
				},
				sort: {
					orderBy: undefined,
					dir: undefined
				}
			};
		},
		methods: {
			resetPageNo(){
				this.currentPage = 0;
			},
			viewError(scope) {
				// 可以在这里执行删除数据的回调操作.......删除操作......
				// this.$message({
				// 	message: '点击了删除操作了', type: 'success'
				// });
				if (scope.row.errorDesc) {
					this.errorDetail = scope.row.errorDesc;
				}
				if (scope.row.errorMsg) {
					this.errorDetail = scope.row.errorMsg;
				}
				this.isShowModal = true;
				console.log(this.isShowModal);
				scope._self.$refs[`popover-${scope.$index}`].doClose();
			},
			// toogleExpandCargo(row) {
			// 	let $table = this.$refs.table;
			// 	this.table.map(item => {
			// 		if (row.id !== item.id) {
			// 			$table.toggleRowExpansion(item, false);
			// 		}
			// 	});
			// 	$table.toggleRowExpansion(row);
			// },
			showSmallTable(groupId) {
				console.log('this is showSmallTable 123', groupId);
				this.$emit('showSmallTable', groupId);
			},
			focusInput() {
				this.$emit('inpitValue', this.search.role);
			},
			//  某一行添加class
			rowClassName(row) {
				if (row.rowIndex === 10000) {
					return 'warning-row';
				}
				if (row.row.executeStatus === 'S') {
					return 'row-expand-cover';
				}
				return '';
			},
			download() {
				this.$emit('download');
			},
			reset() {
				this.search.role = '';
				this.currentPage = 0;
				this.radioId = '';
				this.$emit('reset');
				if (this.config.header && this.config.header.inputDisplay2) {
					this.$emit('getAllData', this.currentPage, this.pageSize, this.search.role, this.search.role2, this.selectValue, this.sort);
				} else {
					this.$emit('getAllData', this.currentPage, this.pageSize, this.search.role, this.radioValue, this.selectValue, this.sort);
				}
			},
			reset2() {
				this.search.role = '';
				this.currentPage = 0;
				this.$emit('frontendPagination', this.currentPage, this.search.role);
				this.$emit('resetDefaultSelect');
				// this.headerSearch.selectValue = this.defaultSelectValue;
				this.headerSearch.isChecked = false;
			},
			clickBtn(btn) {
				this.$emit('clickBtn', btn, this.multipleSelection);
			},
			clickTableBtn(btn, index, row) {
				this.$emit('clickTableBtn', btn, index, row);
			},
			resetData(val) {
				this.currentPage = 0;
				this.pageSize = 15;
				this.search.role = '';
				this.radioValue = '';
				this.selectValue = '';
			},
			searchData(val) {
				this.currentPage = 0;
				this.getData();
			},
			getData() {
				this.radioId = '';
				if (this.config.header && this.config.header.inputDisplay2) {
					this.$emit('getAllData', this.currentPage, this.pageSize, this.search.role, this.search.role2, this.selectValue, this.sort);
				} else {
					this.$emit('getAllData', this.currentPage, this.pageSize, this.search.role, this.radioValue, this.selectValue, this.sort, this.selectValue2);
				}
			},
			viewTrend(index, row) {
				console.log('this is console viewTrend: ', row);
				this.$emit('isModal', row);
			},
			routerTo(index, row) {
				console.log('this is routerTo: ', index, row);
				this.$emit('rowClick', row);
			},
			// getRowClassName({row, rowIndex}){
			// 	if (row.executeStatus === 'F') {
			// 		return 'row-expand-cover';
			// 	}
			// },
			handleSelectionChange(val) {
				this.multipleSelection = val;
				this.$emit('handleSelectionChange_table', val);
			},
			handleSizeChange(val) {
				this.radioId = '';
				this.pageSize = val;
				this.currentPage = 0;
				this.$emit('getAllData', this.currentPage, this.pageSize, this.search.role, this.radioValue, this.selectValue, this.sort);
			},
			handleCurrentChange(val) {
				this.radioId = '';
				this.currentPage = (val - 1);
				if (this.isFrontendPagination) {
					this.$emit('frontendPagination', this.currentPage, this.search.role);
				} else {
					this.$emit('getAllData', this.currentPage, this.pageSize, this.search.role, this.radioValue, this.selectValue, this.sort);
				}
			},
			rowClick(row, event, column) {
				//  当选中多列时，column为undefined，也不勾选复选框
				if (column === undefined || column.label === '趋势') {
					return;
				}
				this.radioId = row.id;
				/* column.label === '分组名称' &&  */
				this.$emit('rowClick', row, event, column);
				// this.$refs.multipleTable.toggleRowSelection(row);
			},
			rowDblclick(row, event, column) {
				this.$emit('row-dblclick', row, event, column);
			},
			showData(val, one) {
				if (this.config.header && this.config.header.highlightSwitch) {
					val = val === null || val === undefined ? '' : val + '';
					if (val.indexOf(this.currentKey) !== -1 && this.currentKey !== '') {
						if (this.config.header.inputNotDisplay) {
							return val.replace(this.currentKey, '<font color="#409EFF">' + this.currentKey + '</font>');
						} else {
							return val.replace(this.search.role, '<font color="#409EFF">' + this.currentKey + '</font>');
						}
					}
				}
				return one ? val : this.formatNum(val);
			},
			formatNum(num) {
				// 将数字串转换成带逗号的显示方式
				// eslint-disable-next-line
				if (!/^([+\-])?(\d+)(\.\d+)?$/.test(num)) {
					// alert("wrong!");
					return num;
				}
				let a = RegExp.$1;
				let b = RegExp.$2;
				let c = RegExp.$3;
				let re = new RegExp().compile('(\\d)(\\d{3})(,|$)');
				while (re.test(b)) {
					b = b.replace(re, '$1,$2$3');
				}
				return a + '' + b + '' + c;
			},
			getTooltipContent(row, key) {
				if (this.config.tooltipLabel === undefined) {
					return undefined;
				}
				let result;
				const label = this.config.tooltipLabel.label;
				const value = this.config.tooltipLabel.value;
				row[this.config.tooltipLabel.key].forEach(item => {
					if (item[label] === key) {
						result = item[value];
					}
				});
				return result;
			},
			removeRole(row, key) {
				const roles = row[this.config.tooltipLabel.key];
				for (let i = 0; i < roles.length; i++) {
					if (roles[i][this.config.tooltipLabel.label] === key) {
						roles.splice(i, 1);
					}
				}
			},
			changeStatusByRole(scope, item) {
				scope.row.iconStyle = item.role.test(scope.row[item.key]) ? 'el-icon-circle-check' : 'el-icon-circle-close';
			},
			getMultipleSelection() {
				return this.multipleSelection;
			},
			setSelection(ids) {
				this.multipleSelection = [];
				const that = this;
				this.table.forEach(item => {
					if (ids.includes(item.id)) {
						that.multipleSelection.push(item);
						that.$refs.multipleTable.toggleRowSelection(item);
					}
				});
			},
			setSelectValue(status) {
				this.selectValue = status;
			},
			judgeShow(item, scope) {
				/**
				 * 1.{isClose: false} 是否永久不显示
				 * 2.{key: '', value: ''} 当前行某个字段（key）等于value时显示
				 * 3.{emptyLabel: ''} 当前行某个字段（emptyLabel）为空时显示
				 * 4.{regEx: {key: '', value: /^$/}} 当某个字段（key）满足正则表达式value时显示
				 */
				return !item.custom || (item.custom && !item.custom.isClose && (
					(scope.row[item.custom.key] !== undefined && scope.row[item.custom.key] === item.custom.value) ||
					(item.custom.emptyLabel && (!scope.row[item.custom.emptyLabel] || scope.row[item.custom.emptyLabel] === '')) ||
					(scope.row.isStart === item.name)));
			},
			renderHeader(h, {column, $index}) {
				if (column.label.length > 10) {
					return h(
						'div', [
							h('el-tooltip', {
								props: {
									effect: 'dark',
									content: column.label,
									placement: 'top'
								}
							}, [h('span', column.label)])
						]
					);
				} else {
					return column.label;
				}
			},
			sortTable(column) {
				this.sort.orderBy = column.prop;
				this.sort.dir = column.order === 'descending' ? 'DESC' : 'ASC';
				this.searchData();
			},
			computedOperation(tableBtn, scope) {
				let list = [];
				const iconMapping = [];
				//这里只为向下兼容，存储一下按钮的index
				for (const i in tableBtn) {
					const item = tableBtn[i];
					item.index = parseInt(i);
					// TODO 通过配置文字转为icon
					const icon = iconMapping ? iconMapping[item.name] : undefined;
					item.icon = icon ? '<i class="' + icon + '"></i>' : item.name;
					if (this.judgeShow(item, scope)) {
						list.push(item);
					}
				}
				return list;
			},
			computedOperationTeshu(tableBtn, scope) {
				let list = [];
				const iconMapping =[];
				//这里只为向下兼容，存储一下按钮的index
				for (const i in tableBtn) {
					const item = tableBtn[i];
					item.index = parseInt(i);
					// TODO 通过配置文字转为icon
					const icon = iconMapping ? iconMapping[item.name] : undefined;
					item.icon = icon ? '<i class="' + icon + '"></i>' : item.name;
					if (this.judgeShow(item, scope)) {
						list.push(item);
					} else {
						list.push('teshu');
					}
				}
				return list;
			}
		}
	};
</script>

<style lang="scss" scoped>
 @import "~./index.scss";
 
</style>

